<template>
	<view class="pt20" style="padding-bottom: 100rpx;">
		<view class="classes dflex alc jcsb pr30 pl30">
			<view>填写年级</view>
			<view>
				<u--input
					placeholder="请填写年级"
					border="0"
					fontSize="32rpx"
					color="#333"
					inputAlign="right"
				></u--input>
			</view>
		</view>
		<view class="center mt20">
			<view class="item dflex alc jcsb">
				<view>添加班级</view>
				<view @click="handerAdd">
					<image src="../static/add.png" style="width: 40rpx;height: 40rpx;"></image>
				</view>
			</view>
			<view class="item dflex alc jcsb">
				<view>
					<u--input
						placeholder="请填写班级"
						border="0"
						fontSize="32rpx"
						color="#333"
						inputAlign="left"
						v-model="name"
					></u--input>
				</view>
				<view class="dflex alc">
					<u--input
						placeholder="请填写班级人数"
						border="0"
						fontSize="32rpx"
						color="#333"
						inputAlign="right"
						v-model="num"
					></u--input>
					<view class="ml20 fs32 fw500 colora">人</view>
				</view>
			</view>
			<!-- 循环生成 -->
			<view class="item dflex alc jcsb" v-for="(item, index) in arr" :key="index">
				<view>{{ item.name }}</view>
				<view class="dflex alc">
					<view>{{ item.num }}</view>
					<view class="ml20 fs32 fw500 colora">人</view>
				</view>
			</view>
		</view>
		<view class="textc white btn auto">确认</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			name: '',
			num: '',
			arr: [
				{
					id: 1,
					name: '一班',
					num: 55
				},
				{
					id: 2,
					name: '二班',
					num: 50
				},
				{
					id: 3,
					name: '三班',
					num: 45
				},
				{
					id: 4,
					name: '四班',
					num: 66
				}
			]
		};
	},
	methods: {
		handerAdd() {
			this.arr.push({ id: Date.now(), name: '五班', num: 66 });
			this.name = '';
			this.num = '';
		}
	}
};
</script>

<style lang="scss" scoped>
.classes {
	width: 750rpx;
	height: 124rpx;
	background: #ffffff;
	opacity: 1;
}
.center {
	width: 750rpx;
	background: #ffffff;
	padding: 0rpx 30rpx;
	.item {
		width: 690rpx;
		height: 124rpx;
		border-bottom: 2rpx solid #eaeaea;
	}
}
.btn {
	width: 690rpx;
	height: 100rpx;
	line-height: 100rpx;
	background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	margin-top: 200rpx;
}
</style>
